import React, { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { Button, Checkbox, Form, Input, message } from "antd";
import MyContext from "../../utils/myContext.jsx";
import "./index.scss";
import axios from "@/utils/http.jsx";

// 加密
import md5 from 'js-md5';
React.Component.prototype.$md5 = md5;


const LoginContent = () => {

  const [form] = Form.useForm();
  const store = React.useContext(MyContext);
  const [messageApi, contextHolder] = message.useMessage();
  const navigator = useNavigate();
  let checked = false
  try {
    checked = localStorage.getItem('zhujingChecked').remember
  } catch (error) {
    
  }
  useEffect(()=>{
    if(checked){
      form.setFieldsValue({
        admin_name:JSON.parse(localStorage.getItem('zhujingChecked')).admin_name,
        admin_password:JSON.parse(localStorage.getItem('zhujingChecked')).admin_password,
        remember:JSON.parse(localStorage.getItem('zhujingChecked')).remember
      })
    }
    else{
      form.setFieldsValue({
        remember:false
      })
    }
    
    
  },[])
  const onFinish = (data) => {
    const admin_password = md5(data.admin_password);
    localStorage.setItem('zhujingChecked',JSON.stringify(data))
    axios({
      method: "post",
      url: "/login",
      data:{
        admin_name:data.admin_name,
        admin_password:admin_password
      }
    }).then((res) => {
      if (res.code === 200) {
        store.toLogin(res);
        navigator("/home");
      } else {
        messageApi.open({
          type: "error",
          content: res.msg,
        });
      }
    }).catch(()=>{
      messageApi.open({
        type: "error",
        content: '服务器连接失败!',
      });
    });
  };

  const onFinishFailed = (errorInfo) => {
    messageApi.open({
      type: "error",
      content: "不能为空!",
    });
  };
  const remember = (e) =>{
    
  }
  return (
    <>
      {contextHolder}
      <Form
      form={form}
        name="basic"
        className="login"
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 16 }}
        style={{ maxWidth: 600 }}
        initialValues={{ remember: true }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="off"
      >
        <h2 style={{ textAlign: "center", paddingBottom: "30px" }}>
          欢迎登录筑燝房产
        </h2>
        <Form.Item
          label="用户名"
          name="admin_name"
          rules={[{ required: true, message: "请输入账号" }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="密码"
          name="admin_password"
          rules={[{ required: true, message: "请输入密码" }]}
        >
          <Input.Password />
        </Form.Item>

        <Form.Item
          name="remember"
          valuePropName="checked"
          wrapperCol={{ offset: 8, span: 16 }}
        >
          <Checkbox  onChange={remember}>记住密码</Checkbox>
        </Form.Item>

        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
          <Button type="primary" htmlType="submit">
            登录
          </Button>
        </Form.Item>
      </Form>
    </>
  );
};
const Login = () => {
  return (
    <>
      <div className="login-box">
        <LoginContent></LoginContent>
      </div>
    </>
  );
};

export default Login;
